<template>
  <div class="contrainer">
    <p class="title">请选择修改问卷模式</p>
    <div class="items">
      <div :class="select == 1 ? 'item a' : 'item'" @click="changeselect(1)">
        <div>
          <i class="el-icon-document"></i>
        </div>
        <div>
          <p>保留答卷</p>
          <div>修改受限制</div>
        </div>
      </div>
      <div :class="select == 2 ? 'item a' : 'item'" @click="changeselect(2)">
        <div>
          <i class="el-icon-delete"></i>
        </div>
        <div>
          <p>删除所有答卷</p>
          <div>修改不受限制</div>
        </div>
      </div>
      <div :class="select == 3 ? 'item a' : 'item'" @click="changeselect(3)">
        <div>
          <i class="el-icon-edit-outline"></i>
        </div>
        <div>
          <p>复制此问卷并去编辑</p>
          <div>原始问卷不受任何影响</div>
        </div>
      </div>
    </div>
    <!-- 提示 -->
    <div class="content">
      <!-- 小三角 -->

      <div class="box" v-show="select == 1">
        <div class="squire" v-show="select"></div>
        <p class="text">
          只能修改问卷的细节，例如更改错别字、添加选项、增加跳题逻辑或修改题目的属性等。
        </p>
        <p class="text">
          不能对问卷做以下操作：<b style="color: #000"
            >删除题目或选项、移动题目或选项、转换题型</b
          >
        </p>
      </div>
      <div class="box" v-show="select == 2" @click="changeselect(2)">
        <div class="squire1" v-show="select"></div>
        <p class="text">1.删除内容：<span class="fred">{{answerNum?answerNum:0}}份有效答卷</span></p>
        <p class="text">
          2.答卷<span class="fred">删除后不可恢复</span>，请谨慎选择。
        </p>
      </div>
      <div class="box" v-show="select == 3" @click="changeselect(3)">
        <div class="squire2" v-show="select"></div>
        <p class="text">
          复制一份题目完全一致的新问卷，对复制的问卷进行编辑，不会影响到原始问卷的题目及回收数据
        </p>
      </div>
    </div>
    <!-- 下一步 -->
    <div class="nextbtn">
      <el-button type="primary" round :disabled="select == 0" @click="next"
        >下一步</el-button
      >
    </div>
    <!-- 问卷标题弹框 -->
    <surveyName
      :isshow.sync="showSurvey"
      :type="type"
      @copySurvey="copySurvey"
      ref="surveyname"
    ></surveyName>
  </div>
</template>

<script>
import { copyQuestion, delAnswer } from "../../api/questions/index";
import {
  Questionmsg,
} from "../../api/questions/updatequestion";
import surveyName from "./components/surveyName.vue";
export default {
  name: "MixedStateAdminUpdateCenter",

  data() {
    return {
      select: 1,
      id: "",
      showSurvey: false,
      type: 2,
      oldSurveyId: "",
      answerNum:undefined
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.oldSurveyId = this.$route.query.id;
    this.getMsg()
  },
  components: {
    surveyName,
  },
  mounted() {},

  methods: {
    changeselect(val) {
      if (val != this.select) {
        this.select = val;
      } else {
        this.select = 0;
      }
    },
    next() {
      // 1保留，2删除，3复制
      if (!this.select) {
        this.$modal.msgError("请选择修改问卷模式");
        return;
      }
      if (this.select === 1) {
        this.$router.push({
          path: "/question/addQuestion",
          query: {
            id: this.id,
            select: this.select,
          },
        });
      } else if (this.select === 2) {
        delAnswer(this.id).then((res) => {
          this.$modal.msgSuccess("答卷删除成功");
          this.$router.push({
            path: "/question/addQuestion",
            query: {
              id: this.id,
            },
          });
        });
      } else {
        this.showSurvey = true;
        this.$refs.surveyname.show();
      }
    },
    async copySurvey(e) {
      const loading = this.$loading({
        lock: true,
        text: "正在复制…",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.6)",
      });

      let params = {
        surveyName: e,
        surveyId: this.oldSurveyId,
      };
      let res = await copyQuestion(params);
      const { code, data } = res;
      if (code == 200) {
        this.$modal.msgSuccess("复制成功！");
        this.showSurvey = false;
        // this.getList()
        loading.close();
        this.$router.push({
          path: "/question/addQuestion",
          query: {
            id: data.newSurveyId,
          },
        });
      } else {
        loading.close();
      }
    },
    async getMsg() {
      let obj = {
        surveyId: this.id,
      };
      let res = await Questionmsg(obj);
      this.answerNum=res.data.answerNum
    },
  },
};
</script>

<style lang="scss" scoped>
.contrainer {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0px;
}
.title {
  font-size: 32px;
  font-weight: 700;
}
.items {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
  font-size: 70px;

  .item {
    display: flex;
    align-items: center;
    width: 30%;
    border: 2px solid rgba(229, 229, 229, 1);
    border-radius: 5px;
    padding: 40px;
    color: rgba(229, 229, 229, 1);
  }
  .a {
    border: 2px solid rgba(39, 196, 120, 1);
    color: rgba(39, 196, 120, 1);
  }
}
.item > div:last-child > p {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #000;
}
.item > div:last-child > div {
  font-size: 16px;
  color: rgba(166, 166, 166, 1);
}
.nextbtn {
  margin-top: 130px;
  button {
    width: 110px;
    height: 41px;
    background-color: rgba(39, 196, 120, 1);
    font-size: 20px;
    border: 0px;
  }
}
.content {
  width: 100%;
  margin-top: 50px;
  position: relative;
  .box {
    width: 100%;
    background-color: rgba(229, 229, 229, 0.5);
    padding: 30px;
    font-size: 18px;
  }
}
.text {
  color: rgba(166, 166, 166, 1);
}
.fred {
  color: red;
}
.squire {
  width: 20px;
  height: 20px;
  border: 10px solid transparent;
  border-bottom: 15px solid #f2f2f2;
  position: absolute;
  top: -25px;
  left: 50px;
}
.squire1 {
  width: 20px;
  height: 20px;
  border: 10px solid transparent;
  border-bottom: 15px solid #f2f2f2;
  position: absolute;
  top: -25px;
  left: 670px;
}
.squire2 {
  width: 20px;
  height: 20px;
  border: 10px solid transparent;
  border-bottom: 15px solid #f2f2f2;
  position: absolute;
  top: -25px;
  left: 1150px;
}
</style>